<template>
  <!-- 展开收起列表 -->
  <div class="lists">
    <el-alert
      v-for="item in newList"
      :key="item.id"
      :title="item.title"
      :type="item.type"
      effect="dark"
      :closable="false"
      center
    >
    </el-alert>
    <!-- 当列表仅有三条数据，不显示该切换部分-->
    <el-divider v-if="lists.length > 3" @click="showAll = !showAll">
      {{ showAll ? "收起" : "展开" }}
      <i :class="'el-icon-arrow-' + showAll ? 'up' : 'down'"></i>
    </el-divider>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showAll: false, //展开与收起布尔值
      // 列表数据
      lists: [
        { title: "第1个", type: "success", id: 1 },
        { title: "第2个", type: "info", id: 2 },
        { title: "第3个", type: "warning", id: 3 },
        { title: "第4个", type: "error", id: 4 },
        { title: "第5个", type: "success", id: 5 },
        { title: "第6个", type: "error", id: 6 },
        { title: "第7个", type: "info", id: 7 },
        { title: "第8个", type: "warning", id: 8 },
      ],
    };
  },
  computed: {
    newList() {
      //先判断showAll的布尔值，第一次进来默认为false
      if (this.showAll === false) {
        // 判断数组长度是否大于3
        if (this.lists.length > 3) {
          // 截取前3条数据，返出去展示
          return this.lists.slice(0, 3);
        } else {
          // 如果列表长度不够三条，直接展示原列表
          return this.lists;
        }
      } else {
        //这里showAll为true时，展示全部数据，对应名称图标更改
        return this.lists;
      }
    },
  },
};
</script>

<style scoped>
.el-divider__text.is-center {
  background-color: aquamarine;
  cursor: pointer;
}
.lists {
  width: 300px;
  margin: 20px 0;
}
.el-alert {
  margin: 10px 0;
}
</style>
